<template>
    <div class="edit">
        <div class="left">
            <div class="btn"></div>
            <pre id="editor-html">

            </pre>
            <pre id="editor-js"></pre>
        </div>
        <div class="right"></div>
    </div>
</template>

<script>
import $ from 'jquery';
import ace from 'ace-js';
// import '@/lib/ace';
// import '@/lib/ext-language_tools';

export default {
    name: 'Edit',
    mounted() {
        // ace.require("ace/ext/language_tools");
        this.htmlInit();
        //  var editorJs = ace.edit("editor-js", {
        //     theme: "ace/theme/monokai",
        //     mode: "ace/mode/javascript",
        //     autoScrollEditorIntoView: true,
        //     enableBasicAutocompletion: true,
        //     enableSnippets: true,
        //     enableLiveAutocompletion: true
        // });
    },
    methods: {
        // 初始化html
        htmlInit() {
            let editorHtml = ace.edit("editor-html");
            editorHtml.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true,//只能补全
            });
            //monokai模式是自动显示补全提示
            editorHtml.setTheme("ace/theme/monokai");
            //语言
            editorHtml.getSession().setMode("ace/mode/html");
            //字体大小
            editorHtml.setFontSize(16);
            // document.getElementById('editor-html').srcdoc  = '<div>aa</div>'
        }
    }
}
</script>

<style lang="scss" scoped>
.edit {
    width: 100%;
    height: 100%;
    .left {
        width: 50%;
        height: 100%;
    }
    #editor-html {
        width: 100%;
        height: 300px;
    }
    #editor-js {
        width: 100%;
        height: calc(100% - 300px);
    }
}
</style>
